import React,{Component} from 'react';
import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";

import {Menu,Modal,Input,Button,Layout} from "antd";
import {
  LockOutlined,
  UserOutlined,
  UnlockOutlined,
  HomeOutlined,
  SettingOutlined,
  LayoutOutlined,
  HddOutlined,
  BarsOutlined,
  DatabaseOutlined,
  LinkOutlined,
  LogoutOutlined,
  ShopOutlined
} from '@ant-design/icons';
import { Route,BrowserRouter , Switch,Link,NavLink } from "react-router-dom";


import {View} from "./component/index";

const { SubMenu } = Menu;
const { Content, Sider } = Layout;


@inject(["store"])
@observer
class MyRouter extends Component{
  constructor(props){
    super(props);
    this.store = this.props.store;
    window.onload=()=>this.store.onresize();
    window.onresize=()=>this.store.onresize();
    this.state={
      logout:false,
    };
  }
  
  @computed get navigator(){return toJS(this.store.navigator);}
  @computed get pages(){return toJS(this.store.pages);}
  @computed get subKey(){return this.store.subKey;}
  @computed get user(){return this.store.user;}
  @computed get loading(){return this.store.loading;}
  @computed get usr(){return this.store.usr;}
  @computed get pwd(){return this.store.pwd;}
  @computed get rootPath(){return this.store.rootPath;}

  @computed get website(){return this.store.website;}

  @computed get height(){return this.store.height;}
  @computed get collapsed(){return this.store.collapsed;}


  componentDidMount () {
    window.onload=window.onresize=()=>this._height();
    this._height();
  }
  
  _height(){
    this.store.onresize();
    this.store.set("height",document.body.clientHeight);
  }
  _url(str){
    return "".concat(this.rootPath,"/",str);
  }

  // 左侧点击加亮
  _subKey(){
    switch(this.subKey){
      case "orderrenewal":
      case "orderrecycle":
        return "order";
        break;
      case "productedit":
        return "product";
        break;
      case "shopsedit":
        return "shops";
        break;
      default:
        return this.subKey;
    }
  }


  render(){
    const login = (
      <Modal
        width={400}
        maskStyle={{background:"#444"}}
        title={<div><LockOutlined style={{color:"#5482ba",marginRight:10}} />用户登录</div>}
        visible={!this.user}
        closable={false}
        footer={false}
        confirmLoading={this.loading}
        iconType="lock"
      >
        <div>
          <div style={{marginTop:-10,color:"red"}}>{this.msg}</div>
          <Input
            placeholder="用户名"
            size="large"
            addonBefore={<UserOutlined />}
            style={{margin:"5px 0"}}
            value={this.usr}
            onChange={(e)=>this.store.set("usr",e.target.value)}
            ref={node => this.userNameInput = node}
            onPressEnter={()=>this.passwordInput.focus()}
          />
          <Input
            onPressEnter={()=>this.store.login()}
            placeholder="密码"
            size="large"
            addonBefore={<UnlockOutlined />}
            style={{margin:"5px 0"}}
            value={this.pwd}
            onChange={(e)=>this.store.set("pwd",e.target.value)}
            type="password"
            ref={node => this.passwordInput = node}
          />
          <Button
            size="large"
            loading={this.loading}
            type="primary"
            style={{marginTop:20,width:"100%"}}
            onClick={()=>this.store.login()}
          >
            登录
          </Button>
        </div>
      </Modal>
    );
    const subKey = this._subKey();
    console.log(subKey);
    if(!this.user){return login;}
    return(
      <BrowserRouter>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider
            collapsible collapsed={this.collapsed} 
            onCollapse={collapsed=>this.store.set("collapsed",collapsed)}
            >
            <View style={{height:50,alignItems:"center"}}>
              <img alt="宜人租机" style={{marginLeft:5,height:30,maxWidth:30,borderRadius:15}} src="/logo.png" />
              {
                !this.collapsed?
                <span style={{paddingLeft:5,fontWeight:700,fontSize:16,color:"#fff"}}>
                  {this.website.sys && this.website.sys.name?this.website.sys.name:""}
                </span>:
                null
              }
              </View>
            <Menu
              mode="inline"
              defaultSelectedKeys={['0']}
              defaultOpenKeys={['camera']}
              style={{flex:1,height:this.height-100,overflow:"hidden",overflowY:"auto" }}
              selectedKeys={[subKey]}
              >
              <Menu.Item key="home">
                <Link to={this._url("home")}> 
                  <HomeOutlined />
                  <span>首页</span>
                </Link>
              </Menu.Item>
              <SubMenu
                key="setting"
                title={
                  <span>
                    <SettingOutlined />
                    <span>配置</span>
                  </span>
                }
                >
                <Menu.Item key="configura">
                  <Link to={this._url("configura")}>
                    <LayoutOutlined />
                    <span>系统设置</span>
                  </Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="camera"
                title={
                  <span>
                    <HddOutlined />
                    <span>数据管理</span>
                  </span>
                }
                >
                <Menu.Item key="type">
                  <Link to={this._url("type")}>
                    <BarsOutlined />
                    <span>分类编辑</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="shops">
                  <Link to={this._url("shops")}>
                    <ShopOutlined />
                    <span>商铺管理</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="product">
                  <Link to={this._url("product")}>
                    <DatabaseOutlined />
                    <span>商品管理</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="comment">
                  <Link to={this._url("comment")}>
                    <DatabaseOutlined />
                    <span>商品评论</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="coupon">
                  <Link to={this._url("coupon")}>
                    <DatabaseOutlined />
                    <span>优惠券管理</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="link">
                  <Link to={this._url("link")}>
                    <LinkOutlined />
                    <span>链接数据</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="order">
                  <Link to={this._url("order")}>
                    <LinkOutlined />
                    <span>订单数据</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="student">
                  <Link to={this._url("student")}>
                    <LinkOutlined />
                    <span>学生认证</span>
                  </Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="finances"
                title={
                  <span>
                    <SettingOutlined />
                    <span>财务管理</span>
                  </span>
                }
                >
                <Menu.Item key="financerewview">
                  <Link to={this._url("finance/rewview")}>
                    <LayoutOutlined />
                    <span>提款审核</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="financebill">
                  <Link to={this._url("finance/bill")}>
                    <LayoutOutlined />
                    <span>账单管理</span>
                  </Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="users"
                title={
                  <span>
                    <HddOutlined />
                    <span>用户管理</span>
                  </span>
                }
                >
                  <Menu.Item key="user">
                    <Link to={this._url("user")}>
                      <UserOutlined />
                      <span>用户管理</span>
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="merchant">
                    <Link to={this._url("merchant")}>
                      <UserOutlined />
                      <span>商铺用户</span>
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="admin">
                    <Link to={this._url("admin")}>
                      <UserOutlined />
                      <span>系统管理员</span>
                    </Link>
                  </Menu.Item>
                </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <View style={{background:"#001529",height:50,flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
              <View style={{flexDirection:"row"}}>
                {
                  this.navigator.length?this.navigator.map((item,i)=>{
                    return(
                      <View key={i}>
                        {
                          this.navigator.length!==(i+1)?
                          <View>
                            <Link
                              style={{color:"#fff"}}
                              to={item.path||"/"}
                              >
                              {item.name}
                            </Link>
                            <span style={{margin:"0 5px",color:"#fff"}}>&gt;</span>
                          </View>:
                          <View style={{color:"#fff"}}>
                            {item.name}
                          </View>
                        }
                      </View>
                    );
                  }):null
                }
              </View>
              <Button type="link"
                icon={<LogoutOutlined style={{color:"red"}} />} 
                onClick={()=>{
                  this.setState({logout:true})
                  Modal.confirm({
                    title:"注销登录",
                    content:"是否真的注销登录？",
                    onOk:()=>this.store.logout()
                  });
                }}>
              </Button>
            </View>
            <Content style={{background:"#fff"}}>
              <View style={{height:this.height-50,overflow:"hidden"}}>
                <Switch>
                  <Route exact path={`${this.rootPath}/home`} component={this.pages.Home}/>
                  <Route path={`${this.rootPath}/home`} component={this.pages.Home}/>

                  <Route path={`${this.rootPath}/type`} component={this.pages.Type}/>
                  <Route path={`${this.rootPath}/configura`} component={this.pages.Configura}/>
                  <Route path={`${this.rootPath}/pedit/:id`} component={this.pages.ProductEdit}/>
                  <Route path={`${this.rootPath}/pedit`} component={this.pages.ProductEdit}/>
                  <Route path={`${this.rootPath}/product`} component={this.pages.Product}/>
                  
                  <Route path={`${this.rootPath}/shops/edit/:id`} component={this.pages.ShopsEdit}/>
                  <Route path={`${this.rootPath}/shops/edit`} component={this.pages.ShopsEdit}/>
                  <Route path={`${this.rootPath}/shops`} component={this.pages.Shops}/>

                  <Route path={`${this.rootPath}/comment`} component={this.pages.Comment}/>
                  
                  <Route path={`${this.rootPath}/coupon/edit/:id`} component={this.pages.CouponEdit}/>
                  <Route path={`${this.rootPath}/coupon/edit`} component={this.pages.CouponEdit}/>
                  <Route path={`${this.rootPath}/coupon`} component={this.pages.Coupon}/>

                  <Route path={`${this.rootPath}/link`} component={this.pages.Link}/>


                  <Route path={`${this.rootPath}/finance/rewview`} component={this.pages.FinanceRewview}/>
                  <Route path={`${this.rootPath}/finance/bill`} component={this.pages.FinanceBill}/>

                  <Route path={`${this.rootPath}/order/recycle`} component={this.pages.OrderRecycle}/>
                  <Route path={`${this.rootPath}/order/renewal`} component={this.pages.OrderRenewal}/>
                  <Route path={`${this.rootPath}/order`} component={this.pages.Order}/>

                  <Route path={`${this.rootPath}/student`} component={this.pages.Student}/>

                  <Route path={`${this.rootPath}/user`} component={this.pages.User}/>
                  <Route path={`${this.rootPath}/merchant`} component={this.pages.UserMerchant}/>
                  <Route path={`${this.rootPath}/admin`} component={this.pages.UserAdmin}/>
     
                </Switch>
              </View>
            </Content>
            
          </Layout>
        </Layout>
      </BrowserRouter>
    );
  }

}


export default MyRouter;
